<template>
  <div class="container">
    <div class="top-box">
      <img v-src="'/static/img/my/vip-top-bg.png'" alt="">
      <p class="top-desc">会员看更多剧</p>
    </div>
    <div class="register-box">
      <img class="dain" style="width: 6.21rem" v-src="'/static/img/my/dian.png'" alt="">
      <img class="zhuce-titme" style="width: 3.72rem" v-src="'/static/img/my/h5_zhuce.png'" alt="">
      <div class="register input_box">
        <div class="input_list flex-row flex-y-center">
          <label><img style="width: .24rem" v-src="'/static/img/my/phone.png'" alt=""></label>
          <input v-model="phone" type="number" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d\.]/g,'')"
                 onblur="value=value.replace(/[^\d\.]/g,'')" placeholder="请输入手机号">
        </div>
        <div class="input_list input_list_code flex-row flex-y-center">
          <div class="code flex-grow-1 flex-y-center">
            <label><img style="width: .34rem" v-src="'/static/img/my/code.png'" alt=""></label>
            <input v-model="code" type="number" pattern="[0-9]*" onkeyup="value=value.replace(/[^\d\.]/g,'')"
                   onblur="value=value.replace(/[^\d\.]/g,'')" placeholder="请输入验证码">
          </div>
          <button @click="getCode" :disabled="disabled" :class="{'active':showActive}"
                  class="code_btn">
            {{code_text}}
          </button>
        </div>
        <div class="input_list flex-row flex-y-center">
          <label><img style="width: .26rem" v-src="'/static/img/my/password.png'" alt=""></label>
          <input v-model="password" type="text" placeholder="6-12位数字或字母">
        </div>
        <div class="input_list flex-row flex-y-center">
          <label><img style="width: .34rem" v-src="'/static/img/my/count.png'" alt=""></label>
          <input v-model="yao_qing_phone" type="text" placeholder="邀请人手机号">
        </div>
      </div>
      <div @click="registerBtn" class="registerbtn flex-grow-0 flex-y-center flex-x-center">
        注 册
      </div>
    </div>
    <img class="bottombg" style="width:3.78rem" v-src="'/static/img/my/bottombg.png'" alt="">
  </div>
</template>

<script>
  document.title = '邀请好友领会员';
  import {REGISTER, GETCODE} from 'src/const/uri'

  export default {
    name: "Register",
    data() {
      return {
        phone: '',
        code: '',
        password: '',
        yao_qing_phone: '',
        disabled: false,
        code_text: '获取验证码',
        showActive: '',
        passwordreg: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
        phonereg: /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
      }
    },
    methods: {
      getCode() {
        var time = 60;
        if (this.phone) {
          if (this.phonereg.test(this.phone)) {
            let formdata = new FormData;
            formdata.append('phone', this.phone)
            this.$ajax.uploadForm(GETCODE, {}, formdata).then((res) => {
              if (res.code == 200) {
                this.$vux.toast.text('发送成功');
                if (!this.disabled) {
                  setTimeout(() => {
                    var timer = setInterval(() => {
                      time -= 1;
                      if (time == 0) {
                        clearInterval(timer);
                        this.showActive = false;
                        this.code_text = `重新发送`;
                        this.disabled = false;
                      } else {
                        this.showActive = true;
                        this.code_text = `${time}s`;
                        this.disabled = true;
                      }
                    }, 1000)
                  }, 100)
                }
              }
            })
          } else {
            this.$vux.toast.text('请输入正确的手机号');
          }
        } else {
          this.$vux.toast.text('手机号不能为空');
        }
      },
      registerBtn() {
        if (!this.phone) {
          this.$vux.toast.text('请输入手机号');
          return false
        } else if (!this.phonereg.test(this.phone)) {
          this.$vux.toast.text('请输入正确的手机号');
          return false
        } else if (!this.code) {
          this.$vux.toast.text('请输入验证码');
          return false
        } else if (!this.password) {
          this.$vux.toast.text('请设置密码');
          return false
        } else if (!this.passwordreg.test(this.password)) {
          this.$vux.toast.text('密码要求大于6位小于12位，字母和数字');
          return false
        }
        // else if (!this.yao_qing_phone) {
        //   this.$vux.toast.text('请输入邀请人手机号');
        //   return false
        // } else if (!this.phonereg.test(this.yao_qing_phone)) {
        //   this.$vux.toast.text('请输入正确的手机号');
        //   return false
        // }
        let formdata = new FormData();
        formdata.append('phone',this.phone);
        formdata.append('password',this.password);
        formdata.append('code',this.code);
        formdata.append('recommend',this.yao_qing_phone);
        this.$ajax.uploadForm(REGISTER, {},formdata).then(res => {
           this.$vux.toast.text('恭喜获得一个月会员，每邀请一个好友加送三个月');
            setTimeout(()=>{
              // window.location.href = ''
            },500)
           //  //注册即送一个月会员
           // //自动跳转下载app 链接
          // this.$vux.confirm.show({
          //   title:'注册成功',
          //   content:'恭喜获得一个月会员，每邀请一个好友加送三个月,',
          //   onCancel () {
          //     console.log('prompt cancel')
          //   },
          //   onConfirm (msg) {
          //
          //   }
          // })
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .top-box {
    position: relative;

    .top-desc {
      font-size: .48rem;
      color: #ffe145;
      position: absolute;
      left: 50%;
      top: 1.94rem;
      transform: translateX(-50%);
    }
  }

  .register-box {
    width: 100%;
    border-radius: 20px 20px 0 0;
    background: #fff;
    margin-top: -1.3rem;
    position: relative;

    .dain {
      position: absolute;
      top: .8rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .zhuce-titme {
      position: absolute;
      left: 50%;
      top: 0.73rem;
      transform: translateX(-50%);
      z-index: 10;
    }

    .register {
      width: 7.02rem;
      padding: .6rem .76rem;
      position: relative;
      left: 50%;
      top: 1.16rem;
      transform: translateX(-50%);
      background-image: linear-gradient(149deg,
      #ff5632 0%,
      #ff282f 32%,
      #ff2036 67%,
      #ff2a60 100%);
      border-radius: 16px;

      &.input_box {
        /*padding: 0.4rem 0.2rem 0.32rem;*/

        .input_list {
          background: #fff;
          font-size: 0.28rem;
          height: 0.68rem;
          margin-bottom: 0.38rem;
          padding-left: 0.25rem;
          border-radius: 4px;

          &:last-child {
            margin-bottom: 0;
          }

          label {
            width: 0.46rem;
          }

          input {
            border: 0;
            background: #fff;
            font-size: .28rem;
            /*height: 99%;*/
          }

          &.input_list_code {
            background: transparent;
            padding-left: 0;
            font-size: .28rem;

            .code {
              background: #fff;
              padding-left: 0.3rem;
              height: 100%;
              border-radius: 4px;

              input {
                width: 2rem;
              }
            }

            .code_btn {
              width: 1.6rem;
              height: 100%;
              text-align: center;
              background-color: #fed43d;
              margin-left: 0.37rem;
              border: 0;
              border-radius: 4px;
              color: #fff;

              &.active {
                color: #fff;
              }
            }
          }
        }
      }

    }

    .registerbtn {
      width: 3.88rem;
      height: .92rem;
      background: url("../../../static/img/my/registerbtnbg.png") no-repeat center center;
      background-size: 100% 100%;
      margin: 1.56rem auto 0;
      font-size: .32rem;
      font-weight: 600;
      color: #e34b01;
    }
  }

  .bottombg {
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>